<template>
<div class="pay-settings views-container">
    <div class="main">
        <div class="content flex-row flex-warp">
            <div class="pay-source" v-if="patSetting.channel.wechat.open">
                <div class="pay-tit flex-row flex-align-c flex-justify-b">
                    <div class="flex-col">
                        <div>微信公众号</div>
                        <p>在公众号中付款时使用</p>
                    </div>
                    <div class="pay-set">
                        <el-button type="primary" @click="clearCache('wechat','wechatpay')" plain size="small">设置支付方式</el-button>
                    </div>
                </div>

                <div class="flex-row pay-content flex-warp">
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.wechatpay.wechat !=='0'" class="pay-icon" icon-class="wechatpay" />
                        <svg-icon v-if="formFormatData.formData.payset.wechatpay.wechat ==='0'" class="pay-icon" icon-class="wechatpaygrey" />
                        <span>微信支付</span>
                    </div>
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.wechatpay.alipay !=='0'" class="pay-icon" icon-class="alipay" />
                        <svg-icon v-if="formFormatData.formData.payset.wechatpay.alipay ==='0'" class="pay-icon" icon-class="alipaygrey" />
                        <span>支付宝支付</span>
                    </div>
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.wechatpay.blance !=='0'" class="pay-icon" icon-class="balance" />
                        <svg-icon v-if="formFormatData.formData.payset.wechatpay.blance ==='0'" class="pay-icon" icon-class="balancegrey" />
                        <span>余额支付</span>
                    </div>
                </div>
            </div>

            <div class="pay-source" v-if="patSetting.channel.wxapp.open">
                <div class="pay-tit flex-row flex-align-c flex-justify-b">
                    <div class="flex-col">
                        <div>微信小程序</div>
                        <p>在小程序中付款时使用</p>
                    </div>
                    <div class="pay-set">
                        <el-button type="primary" @click="clearCache('wxapp','wxapppay')" plain size="small">设置支付方式</el-button>
                    </div>
                </div>

                <div class="flex-row pay-content flex-warp">
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.wxapppay.wechat !=='0'" class="pay-icon" icon-class="wechatpay" />
                        <svg-icon v-if="formFormatData.formData.payset.wxapppay.wechat ==='0'" class="pay-icon" icon-class="wechatpaygrey" />
                        <span>微信支付</span>
                    </div>
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.wxapppay.blance !=='0'" class="pay-icon" icon-class="balance" />
                        <svg-icon v-if="formFormatData.formData.payset.wxapppay.blance ==='0'" class="pay-icon" icon-class="balancegrey" />
                        <span>余额支付</span>
                    </div>
                </div>
            </div>
            <div class="pay-source" v-if="patSetting.channel.H5.open">
                <div class="pay-tit flex-row flex-align-c flex-justify-b">
                    <div class="flex-col">
                        <div>H5</div>
                        <p>在H5中付款时使用</p>
                    </div>
                    <div class="pay-set">
                        <el-button type="primary" @click="clearCache('h5','h5pay')" plain size="small">设置支付方式</el-button>
                    </div>
                </div>

                <div class="flex-row pay-content flex-warp">
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.h5pay.wechat !=='0'" class="pay-icon" icon-class="wechatpay" />
                        <svg-icon v-if="formFormatData.formData.payset.h5pay.wechat ==='0'" class="pay-icon" icon-class="wechatpaygrey" />
                        <span>微信支付</span>
                    </div>
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.h5pay.alipay !=='0'" class="pay-icon" icon-class="alipay" />
                        <svg-icon v-if="formFormatData.formData.payset.h5pay.alipay ==='0'" class="pay-icon" icon-class="alipaygrey" />
                        <span>支付宝支付</span>
                    </div>
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.h5pay.blance !=='0'" class="pay-icon" icon-class="balance" />
                        <svg-icon v-if="formFormatData.formData.payset.h5pay.blance ==='0'" class="pay-icon" icon-class="balancegrey" />
                        <span>余额支付</span>
                    </div>
                </div>
            </div>

            <div class="pay-source" v-if="patSetting.channel.aliapp.open">
                <div class="pay-tit flex-row flex-align-c flex-justify-b">
                    <div class="flex-col">
                        <div>支付宝小程序</div>
                        <p>在支付宝小程序中付款时使用</p>
                    </div>
                    <div class="pay-set">
                        <el-button type="primary" @click="clearCache('alisapp')" plain size="small">设置支付方式</el-button>
                    </div>
                </div>

                <div class="flex-row pay-content flex-warp">
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.alisapp.alipay !=='0'" class="pay-icon" icon-class="alipay" />
                        <svg-icon v-if="formFormatData.formData.payset.alisapp.alipay ==='0'" class="pay-icon" icon-class="alipaygrey" />
                        <span>支付宝支付</span>
                    </div>
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.alisapp.blance !=='0'" class="pay-icon" icon-class="balance" />
                        <svg-icon v-if="formFormatData.formData.payset.alisapp.blance ==='0'" class="pay-icon" icon-class="balancegrey" />
                        <span>余额支付</span>
                    </div>
                </div>
            </div>

            <div class="pay-source" v-if="patSetting.channel.baiduapp.open">
                <div class="pay-tit flex-row flex-align-c flex-justify-b">
                    <div class="flex-col">
                        <div>百度小程序</div>
                        <p>在百度小程序中付款时使用</p>
                    </div>
                    <div class="pay-set">
                        <el-button type="primary" @click="clearCache('baidusapp')" plain size="small">设置支付方式</el-button>
                    </div>
                </div>

                <div class="flex-row pay-content flex-warp">
                    <div class="flex-col pay-item">
                        <p v-if="formFormatData.formData.payset.baidusapp.baidu !=='0'" class="pay-icon-box">
                            <svg-icon class="pay-icon" icon-class="baiduApplets"/>
                        </p>
                        <p v-if="formFormatData.formData.payset.baidusapp.baidu ==='0'" class="pay-icon-box gray">
                            <svg-icon class="pay-icon" icon-class="baiduApplets"/>
                        </p>
                        <span>百度支付</span>
                    </div>
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.baidusapp.blance !=='0'" class="pay-icon" icon-class="balance" />
                        <svg-icon v-if="formFormatData.formData.payset.baidusapp.blance ==='0'" class="pay-icon" icon-class="balancegrey" />
                        <span>余额支付</span>
                    </div>
                    <!-- <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.baidusapp.alipay !=='0'" class="pay-icon" icon-class="alipay" />
                        <svg-icon v-if="formFormatData.formData.payset.baidusapp.alipay ==='0'" class="pay-icon" icon-class="alipaygrey" />
                        <span>支付宝支付</span>
                    </div> -->
                </div>
            </div>

            <div class="pay-source" v-if="patSetting.channel.toutiaoapp.open">
                <div class="pay-tit flex-row flex-align-c flex-justify-b">
                    <div class="flex-col">
                        <div>头条小程序</div>
                        <p>在头条小程序付款时使用</p>
                    </div>
                    <div class="pay-set">
                        <el-button type="primary" @click="clearCache('toutiaosapp')" plain size="small">设置支付方式</el-button>
                    </div>
                </div>

                <div class="flex-row pay-content flex-warp">
                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.toutiaosapp.alipay !=='0'" class="pay-icon" icon-class="toutiao" />
                        <svg-icon v-if="formFormatData.formData.payset.toutiaosapp.alipay ==='0'" class="pay-icon" icon-class="toutiaogrey" />
                        <span>头条支付</span>
                    </div>

                    <div class="flex-col pay-item">
                        <svg-icon v-if="formFormatData.formData.payset.toutiaosapp.blance !=='0'" class="pay-icon" icon-class="balance" />
                        <svg-icon v-if="formFormatData.formData.payset.toutiaosapp.blance ==='0'" class="pay-icon" icon-class="balancegrey" />
                        <span>余额支付</span>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="dialogTableVisible" custom-class="reset-pwd wlm-form-dialog dialog-table">
            <div class="wlm-form" v-if="dialogTableVisible">
                <div class="wlm-form-header wlm-dialog-fixheader">
                    <span class="wlm-dialog-inlenr">设置支付方式</span>
                </div>
                <div class="wlm-form-content">
                    <el-form :ref="formFormatData.key" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                        <el-form-item label="微信支付" prop="oldPassword" v-if="formFormatData.formData.type=='wechat'">
                            <el-select v-model="formFormatData.formData.payset.wechatpay.wechat" placeholder="请选择">
                                <el-option v-if="item.type == '1'||item.type == 'all'" v-for="item in paysetData" :key="item.id" :label="item.name" :value="`${item.id}`">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="支付宝支付" prop="oldPassword" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='wechat'">
                            <el-select v-model="formFormatData.formData.payset.wechatpay.alipay" placeholder="请选择">
                                <el-option v-if="item.type == '2'||item.type == 'all'" v-for="item in paysetData" :key="item.value" :label="item.name" :value="`${item.id}`">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="余额支付" v-if="formFormatData.formData.type=='wechat'">
                            <el-switch active-value="1" inactive-value="0" v-model="formFormatData.formData.payset.wechatpay.blance"> </el-switch>
                        </el-form-item>

                       

                        <el-form-item label="微信支付" prop="oldPassword" v-if="formFormatData.formData.type=='wxapp'">
                            <el-select v-model="formFormatData.formData.payset.wxapppay.wechat" placeholder="请选择">
                                <el-option v-if="item.type == '1'||item.type == 'all'" v-for="item in paysetData" :key="item.id" :label="item.name" :value="`${item.id}`">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="余额支付" v-if="formFormatData.formData.type=='wxapp'">
                            <el-switch active-value="1" inactive-value="0" v-model="formFormatData.formData.payset.wxapppay.blance"> </el-switch>
                        </el-form-item>
                        <el-form-item label="余额支付" v-if="formFormatData.formData.type=='baidusapp'">
                            <el-switch active-value="1" inactive-value="0" v-model="formFormatData.formData.payset.baidusapp.blance"> </el-switch>
                        </el-form-item>
                        
                        <el-form-item label="余额支付" v-if="formFormatData.formData.type=='alisapp'">
                            <el-switch active-value="1" inactive-value="0" v-model="formFormatData.formData.payset.alisapp.blance"> </el-switch>
                        </el-form-item>
                         <el-form-item label="余额支付" v-if="formFormatData.formData.type=='toutiaosapp'">
                            <el-switch active-value="1" inactive-value="0" v-model="formFormatData.formData.payset.toutiaosapp.blance"> </el-switch>
                        </el-form-item>
                        <el-form-item label="微信支付" prop="oldPassword" v-if="formFormatData.formData.type=='h5'">
                            <el-select v-model="formFormatData.formData.payset.h5pay.wechat" placeholder="请选择">
                                <el-option v-if="item.type == '1'||item.type == 'all'" v-for="item in paysetData" :key="item.id" :label="item.name" :value="`${item.id}`">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="支付宝支付" prop="oldPassword" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='h5'">
                            <el-select v-model="formFormatData.formData.payset.h5pay.alipay" placeholder="请选择">
                                <el-option v-if="item.type == '2'||item.type == 'all'" v-for="item in paysetData" :key="item.value" :label="item.name" :value="`${item.id}`">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="支付宝支付" prop="oldPassword" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='alisapp'">
                            <el-select v-model="formFormatData.formData.payset.alisapp.alipay" placeholder="请选择">
                                <el-option v-if="item.type == '2'||item.type == 'all'" v-for="item in paysetData" :key="item.value" :label="item.name" :value="`${item.id}`">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="百度支付" prop="oldPassword" v-if="formFormatData.formData.type=='baidusapp'">
                            <el-select v-model="formFormatData.formData.payset.baidusapp.baidu" placeholder="请选择">
                                <el-option v-if="item.type == '3'||item.type == 'all'" v-for="item in paysetData" :key="item.id" :label="item.name" :value="`${item.id}`">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="支付宝支付" prop="oldPassword" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='baidusapp'">
                            <el-select v-model="formFormatData.formData.payset.baidusapp.alipay" placeholder="请选择">
                                <el-option v-if="item.type == '2'||item.type == 'all'" v-for="item in paysetData" :key="item.value" :label="item.name" :value="`${item.id}`">
                                </el-option>
                            </el-select>
                        </el-form-item> -->

                        <el-form-item label="头条支付" prop="oldPassword" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='toutiaosapp'">
                            <el-select v-model="formFormatData.formData.payset.toutiaosapp.alipay" placeholder="请选择">
                                <el-option v-if="item.type == '4'||item.type == 'all'" v-for="item in paysetData" :key="item.value" :label="item.name" :value="`${item.id}`">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="余额支付" v-if="formFormatData.formData.type=='h5'">
                            <el-switch active-value="1" inactive-value="0" v-model="formFormatData.formData.payset.h5pay.blance"> </el-switch>
                        </el-form-item>

<!-- balance余额，wechat微信支付，baidu百度支付 -->
                         <el-form-item label="默认支付方式" prop="protect" >
                                <!-- <el-radio-group v-model="formFormatData.formData.payset.alisapp.default" class="wlm-form-group">
                                        <el-radio label="wechat" v-if="formFormatData.formData.type=='wechat' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='h5'">微信支付</el-radio>

                                        <el-radio label="alipay" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='wechat' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='h5' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='wechat' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='h5'">支付宝支付</el-radio>

                                        <el-radio label="balance" v-if="formFormatData.formData.type=='h5' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='baidusapp' ||formFormatData.formData.type=='alisapp' ||formFormatData.formData.type=='wechat'">余额支付</el-radio>

                                        <el-radio label="baidu" v-if="formFormatData.formData.type=='baidusapp'" >百度支付</el-radio>
                                </el-radio-group> -->
                                <el-radio-group v-model="formFormatData.formData.payset.alisapp.default" class="wlm-form-group" v-if='formFormatData.formData.type=="alisapp"'>
                                       <el-radio label="wechat" v-if="formFormatData.formData.type=='wechat' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='h5'">微信支付</el-radio>

                                        <el-radio label="alipay" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='wechat' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='h5' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='alisapp'">支付宝支付</el-radio>

                                         <el-radio label="balance" v-if="formFormatData.formData.type=='h5' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='baidusapp' ||formFormatData.formData.type=='alisapp' ||formFormatData.formData.type=='wechat' || formFormatData.formData.type=='toutiaosapp'">余额支付</el-radio>

                                        <el-radio label="baidu" v-if="formFormatData.formData.type=='baidusapp'" >百度支付</el-radio>
                                        <el-radio label="toutiao" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='toutiaosapp'" >头条支付</el-radio>
                                        

                                </el-radio-group>
                                
                                <el-radio-group v-model="formFormatData.formData.payset.baidusapp.default" class="wlm-form-group" v-if='formFormatData.formData.type=="baidusapp"'>
                                       <el-radio label="wechat" v-if="formFormatData.formData.type=='wechat' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='h5'">微信支付</el-radio>

                                        <el-radio label="alipay" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='wechat' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='h5' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='alisapp'">支付宝支付</el-radio>

                                         <el-radio label="balance" v-if="formFormatData.formData.type=='h5' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='baidusapp' ||formFormatData.formData.type=='alisapp' ||formFormatData.formData.type=='wechat' || formFormatData.formData.type=='toutiaosapp'">余额支付</el-radio>

                                        <el-radio label="baidu" v-if="formFormatData.formData.type=='baidusapp'" >百度支付</el-radio>
                                        <el-radio label="toutiao" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='toutiaosapp'" >头条支付</el-radio>

                                </el-radio-group>
                                

                                <el-radio-group v-model="formFormatData.formData.payset.h5pay.default" class="wlm-form-group" v-if='formFormatData.formData.type=="h5"'>
                                       <el-radio label="wechat" v-if="formFormatData.formData.type=='wechat' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='h5'">微信支付</el-radio>

                                       <el-radio label="alipay" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='wechat' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='h5' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='alisapp'">支付宝支付</el-radio>

                                         <el-radio label="balance" v-if="formFormatData.formData.type=='h5' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='baidusapp' ||formFormatData.formData.type=='alisapp' ||formFormatData.formData.type=='wechat' || formFormatData.formData.type=='toutiaosapp'">余额支付</el-radio>

                                        <el-radio label="baidu" v-if="formFormatData.formData.type=='baidusapp'" >百度支付</el-radio>
                                        <el-radio label="toutiao" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='toutiaosapp'" >头条支付</el-radio>

                                </el-radio-group>
                                

                                <el-radio-group v-model="formFormatData.formData.payset.toutiaosapp.default" class="wlm-form-group" v-if='formFormatData.formData.type=="toutiaosapp"'>
                                       <el-radio label="wechat" v-if="formFormatData.formData.type=='wechat' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='h5'">微信支付</el-radio>

                                        <el-radio label="alipay" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='wechat' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='h5' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='alisapp'">支付宝支付</el-radio>

                                        <el-radio label="balance" v-if="formFormatData.formData.type=='h5' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='baidusapp' ||formFormatData.formData.type=='alisapp' ||formFormatData.formData.type=='wechat' || formFormatData.formData.type=='toutiaosapp'">余额支付</el-radio>

                                        <el-radio label="baidu" v-if="formFormatData.formData.type=='baidusapp'" >百度支付</el-radio>
                                        <el-radio label="toutiao" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='toutiaosapp'" >头条支付</el-radio>

                                </el-radio-group>
                                

                                <el-radio-group v-model="formFormatData.formData.payset.wechatpay.default" class="wlm-form-group" v-if='formFormatData.formData.type=="wechat"'>
                                       <el-radio label="wechat" v-if="formFormatData.formData.type=='wechat' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='h5'">微信支付</el-radio>

                                       <el-radio label="alipay" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='wechat' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='h5' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='alisapp'">支付宝支付</el-radio>

                                         <el-radio label="balance" v-if="formFormatData.formData.type=='h5' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='baidusapp' ||formFormatData.formData.type=='alisapp' ||formFormatData.formData.type=='wechat' || formFormatData.formData.type=='toutiaosapp'">余额支付</el-radio>

                                        <el-radio label="baidu" v-if="formFormatData.formData.type=='baidusapp'" >百度支付</el-radio>
                                        <el-radio label="toutiao" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='toutiaosapp'" >头条支付</el-radio>

                                </el-radio-group>
                                

                                <el-radio-group v-model="formFormatData.formData.payset.wxapppay.default" class="wlm-form-group" v-if='formFormatData.formData.type=="wxapp"'>
                                       <el-radio label="wechat" v-if="formFormatData.formData.type=='wechat' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='h5'">微信支付</el-radio>

                                        <el-radio label="alipay" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='wechat' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='h5' || formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='alisapp'">支付宝支付</el-radio>

                                         <el-radio label="balance" v-if="formFormatData.formData.type=='h5' || formFormatData.formData.type=='wxapp' || formFormatData.formData.type=='baidusapp' ||formFormatData.formData.type=='alisapp' ||formFormatData.formData.type=='wechat' || formFormatData.formData.type=='toutiaosapp'">余额支付</el-radio>

                                        <el-radio label="baidu" v-if="formFormatData.formData.type=='baidusapp'" >百度支付</el-radio>
                                        <el-radio label="toutiao" v-if="formFormatData.formData.type!=='wxapp'&&formFormatData.formData.type=='toutiaosapp'" >头条支付</el-radio>

                                </el-radio-group>
                                
                          </el-form-item>
                    </el-form>
                </div>
            </div>
            <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
                <el-button size="small" @click="formFormatSubmit" type="primary">保存</el-button>
            </footer>
        </el-dialog>
    </div>
</div>
</template>

<script>
import {
  paymentIndex,
  paysetIndex,
  paysetEdit
} from '@/api/setting'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'EmptyCache',
  components: {

  },
  computed: {

  },
  data() {
    return {
      paysetData: [],
      dialogTableVisible: false,
      patSetting: {
        'channel': {
          'H5': {
            'open': true
          },
          'wechat': {
            'open': true
          },
          'wxapp': {
            'open': true
          },
          'aliapp': {
            'open': true
          },
          'baiduapp': {
            'open': true
          },
          'toutiaoapp': {
            'open': true
          },
          'android': {
            'open': true
          },
          'ios': {
            'open': true
          }
        }
      },
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: paysetIndex,
            params: {
              id: '',
              always: true
            }
          },
          submitForm: paysetEdit
        },
        formData: {
          type: 'wechat',
          payset: {
            wechatpay: {
              wechat: '0',
              alipay: '0',
              blance: '0',
              default:'wechat'
              
            },
            wxapppay: {
              wechat: '0',
              blance: '0',
              default:'wechat'

            },
            h5pay: {
              wechat: '0',
              alipay: '0',
              blance: '0',
              default:'wechat'

            },
            alisapp: {
              alipay: '0',
              blance: '0',
              default:'wechat'

            },
            baidusapp: {
              baidu: '0',
              blance: '0',
              default:'wechat'
            },
            toutiaosapp: {
              alipay: '0',
              default:'wechat',
              blance: '0'
            },
          }
        },
        rules: {}
      }
    }
  },
  created() {
    this.$nextTick(() => {
      const Base64 = require('js-base64').Base64
      const Cookies = require('js-cookie')
      const storeMenu = Cookies.get('STORE_MENU')
      if (storeMenu && typeof storeMenu === 'string') {
        const storeMenuBase = JSON.parse(Base64.decode(storeMenu))
        console.log(storeMenuBase, 'storeMenuBasestoreMenuBasestoreMenuBase')
        if (!!storeMenuBase && typeof storeMenuBase === 'object') {
          this.patSetting = storeMenuBase
        }
      }
      paymentIndex().then((response) => {
        const {
          data: {
            data: msgData = {}
          }
        } = response
        this.paysetData = [{ id: '0', name: '不开启', wxapp_id: '', type: 'all' }, ...msgData]
      })
    })
  },
  methods: {
    clearCache(params, key) {
      this.dialogTableVisible = true
      this.formFormatData.formData.type = params
    },
    formFormatCallBack() {
      this.dialogTableVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.pay-settings {
    .main {
        width: 100%;
        min-height: calc(100vh - 90px);
        border-radius: 4px;
        background: #ffffff;

        .content {
            padding-top: 20px;

            .pay-source {
                margin-bottom: 20px;
                margin-left: 20px;
                width: 378px;
                border: 1px solid #eee;
                background: #fff;
                padding-bottom: 8px;
                border-radius: 4px;

                .pay-tit {
                    height: 88px;
                    background: #f3f4f7;
                    padding: 20px 20px;

                    div {
                        color: #000;
                        font-size: 18px;
                        padding-bottom: 10px;

                        &.pay-set {
                            align-self: flex-end;
                            padding-bottom: 3px;
                        }
                    }

                    p {
                        font-size: 12px;
                        color: #7d7b7b;
                    }
                }
            }

            .pay-content {
                margin-top: 30px;

                .pay-item {
                    width: 33.33%;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    -ms-flex-align: center;
                    align-items: center;
                    margin-bottom: 20px;

                    .pay-icon-box{
                        width: 36px;
                        height: 36px;
                        line-height: 36px;
                        text-align: center;
                        border-radius: 5px;
                        background: rgb(35,25,220);
                        &.gray{
                           background: rgb(204,204,204);
                        }
                        svg {
                            vertical-align: middle;
                            width: 31px;
                            height: 31px;
                            fill: #fff
                        }
                    }

                    .pay-icon {
                        width: 36px;
                        height: 36px;
                    }

                    span {
                        margin-top: 20px;
                    }
                }
            }
        }
    }

    .main-text {
        margin-top: 30px;
    }
}
</style>
